<template>
    <page>
        <infinite :on-infinite="onInfinite" ref="myscroll" class="fit">
            <router-link to="/user/credits/stores_choose" tag="p" class="h50 px12 white bg2" flex="cross:center">
                <i class="iconfont icon-home fxxl mr8"></i><span flex-box="1">{{shop.shopName}}</span> <i
                    class="iconfont icon-dingwei fxxl"></i>
            </router-link>

            <ul class="px12 h44 white-bg bdb" flex="main:justify">
                <li>积分<span class="red ml6">{{userInfo.integral || 0}}</span></li>
                <router-link :to="{name: 'store_car'}" tag="li" class="c2">购物车</router-link>
                <router-link :to="{name: 'store_order'}" tag="li" class="c2">兑换记录</router-link>
            </ul>
            <tab active-color="#ff5000" :line-width="0" v-model="index" class="bdt bdb my12"
                 v-if="product_type_.length > 1">
                <tab-item v-for="i in product_type_" :key="i.id">{{i.name}}</tab-item>
            </tab>
            <ul class="line22 list f12 clearfix">
                <li v-for="(i, index) in list" :key="index" @click="openDetail(i)"
                    class="fl white-bg tap" style="width: 50%">
                    <m-img :src="i.image" ratio="1" class="fitw"></m-img>
                    <p class="nowrap px12">{{i.title}}</p>
                    <p class="px12  line22 mb2" flex>
                        <span class="orange">{{i.origPrice}}&nbsp;积分</span>
                        <span flex-box="1" class="fsm text3 ml6">已兑换{{i.soldNum}}</span>
                        <i class="iconfont icon-gengduo text3 f16"></i>
                    </p>
                </li>
            </ul>
        </infinite>
    </page>
</template>
<script>
  import { TransferDom, Popup, Cell, Group, Tab, TabItem } from 'vux'

  export default {
    data () {
      return {
        shop: this.$route.params,
        index: 0,
        page: 1,
        list: [],
        CatId: null,
        product_type_: [],
        no_more: false
      }
    },
    async created () {
      // 获取分类列表
      const list = [{id: null, name: '全部商品'}]
      await this.$get('catgory/getCatgoryByShopId', {shopId: this.$route.query.id}).then(body => {
        const arr = body.obj || []
        list.push(...arr)
        this.product_type_ = list
      })
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    methods: {
      // 商品列表
      async onInfinite (page) {
        let {obj: {dataList, total}} = await this.$get('admin/commodity/getCommodityByCondition', {
          shopId: this.$route.query.id,
          CatId: this.CatId,
          page
        })
        this.list.push(...dataList)
        return this.list.length < total
      },

      // 打开商品详情
      openDetail (i) {
        this.$router.push({name: 'store_productList_detail', query: {id: i.id} ,params: {shop: this.shop}})
      }
    },
    watch: {
      index (index) {
        this.CatId = this.product_type_[index].id
        this.list = []
        this.$refs.myscroll.reset()
      }
    },
    components: {
      Tab,
      TabItem
    }
  }
</script>
<style>
    .vux-tab {
        height: auto !important;
    }

    .vux-tab-item {
        background: none !important;
    }
</style>
<style type="text/scss" lang="scss" scoped>
    .list {
        padding: 0 10px;
        $space: 5px;
        li {
            position: relative;
            box-shadow: 1px 2px 2px rgba(0, 0, 0, .0125);
            background-color: white;
            margin-top: $space;
            border-radius: 5px;
            &:nth-child(2n - 1) {
                left: -#{$space / 2};
            }
            &:nth-child(2n) {
                left: #{$space / 2};
            }
        }
    }
</style>
